<template>

	<view>

		<view class="sales_head">
			<picker mode="date" fields="day" @change="changeDataTime">
				<view class="tablist">
					<view style="margin-right:15rpx">{{dataTime ? dataTime : '点击选择'}}</view>
					<image :src="BASE_IMG_URL+'newxia.png'" class="bottomimg" mode="scaleToFill"></image>
				</view>
			</picker>
			<picker v-if="!FDGG"  @change="changeStore" :range="storeList" :value="storeIndex" :range-key="'storeName'">
				<view class="tablist">
					<view style="margin-right:15rpx">
						{{storeList[storeIndex] ? storeList[storeIndex].storeName : '点击选择'}}
					</view>
					<image :src="BASE_IMG_URL+'newxia.png'" class="bottomimg" mode="scaleToFill"></image>
				</view>
			</picker>
		</view>

		<view class="new_fllow">
			<view class="fllow_form">
				<view class="area_head"><text>▎</text>业绩分析</view>
			</view>
			<view class="fllow_form">
				<view>销售收入</view>
				<view class="form_right theme">
					<view>￥{{salessum.totalCollectedAmount ? salessum.totalCollectedAmount: 0 }}元</view>
					<view v-if="false" @click="showGoods" class="iconfont icon-arrows_right"></view>
				</view>
			</view>
			<view class="fllow_form">
				<view>耗卡业绩</view>
				<view class="form_right theme">
					<view>￥{{consumesum.consumeTotal?consumesum.consumeTotal: 0}}元</view>
					<view v-if="false" @click="showGoods" class="iconfont icon-arrows_right"></view>
				</view>
			</view>
			<view class="fllow_form">
				<view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;项目业绩</view>
				<view class="form_right theme">
					<view>￥{{consumesum.projectTotal ? consumesum.projectTotal : 0}}元</view>
					<view v-if="false" @click="showGoods" class="iconfont icon-arrows_right"></view>
				</view>
			</view>
			<view class="fllow_form">
				<view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;产品业绩</view>
				<view class="form_right theme">
					<view>￥{{consumesum.productTotal ? consumesum.productTotal :0}}元</view>
					<view v-if="false" @click="showGoods" class="iconfont icon-arrows_right"></view>
				</view>
			</view>
		</view>
		<view class="new_fllow">
			<view class="fllow_form">
				<view class="area_head"><text>▎</text>会员/客情分析</view>
			</view> 
			<view class="fllow_form">
				<view>昨日到店</view>
				<view class="form_right theme">
					<view>{{yestodayMemberCount}}位</view>
					<view v-if="false" @click="showGoods" class="iconfont icon-arrows_right"></view>
				</view>
			</view>
			<view class="fllow_form">
				<view>今日预约</view>
				<view class="form_right theme">
					<view>{{todayAppointCount}}位</view>
					<view v-if="false" @click="showGoods" class="iconfont icon-arrows_right"></view>
				</view>
			</view>
			<view class="fllow_form">
				<view>今日新增会员</view>
				<view class="form_right theme">
					<view>{{memCount}}位</view>
					<view v-if="false" @click="showGoods" class="iconfont icon-arrows_right"></view>
				</view>
			</view>
			<view class="fllow_form">
				<view>客单价</view>
				<view class="form_right theme">
					<view>￥{{memAvg}}元</view>
					<view v-if="false" @click="showGoods" class="iconfont icon-arrows_right"></view>
				</view>
			</view>
			<view class="fllow_form">
				<view>会员总数</view>
				<view class="form_right theme">
					<view>{{memTotalCount}}位</view>
					<view v-if="false" @click="showGoods" class="iconfont icon-arrows_right"></view>
				</view>
			</view>
			<view class="fllow_form">
				<view>会员卡总数</view>
				<view class="form_right theme">
					<view>{{MemberCardSum.total_cardcnt}}</view>
					<view v-if="false" @click="showGoods" class="iconfont icon-arrows_right"></view>
				</view>
			</view>
			<view class="fllow_form">
				<view>总储值余额</view>
				<view class="form_right theme">
					<view>￥{{MemberCardSum.left_balance}}元</view>
					<view v-if="false" @click="showGoods" class="iconfont icon-arrows_right"></view>
				</view>
			</view>
			<view class="fllow_form">
				<view>总赠送余额</view>
				<view class="form_right theme">
					<view>￥{{MemberCardSum.left_give}}元</view>
					<view v-if="false" @click="showGoods" class="iconfont icon-arrows_right"></view>
				</view>
			</view>
			<view class="fllow_form">
				<view>总余次</view>
				<view class="form_right theme">
					<view>{{MemberCardSum.left_times}}次</view>
					<view v-if="false" @click="showGoods" class="iconfont icon-arrows_right"></view>
				</view>
			</view>
		</view>
		<view class="new_fllow">
			<view class="fllow_form">
				<view class="area_head"><text>▎</text>员工分析</view>
			</view> 
			<view class="fllow_form">
				<view>销售冠军</view>
				<view class="form_right theme">
					<view>{{StaffAnalySum.sales_first}}</view>
					<view v-if="false" @click="showGoods" class="iconfont icon-arrows_right"></view>
				</view>
			</view>
			<view class="fllow_form">
				<view>耗卡冠军</view>
				<view class="form_right theme">
					<view>{{StaffAnalySum.consume_first}}</view>
					<view v-if="false" @click="showGoods" class="iconfont icon-arrows_right"></view>
				</view>
			</view>
			<view class="fllow_form" style="height: auto;display: block;"  @click="signerDetail">
				<view>考勤打卡</view>
				<view class="theme">
					<view style="display: inline;margin-left: 20px;">上班签到（{{StaffAnalySum.signin_shanban}}） 下班签到（{{StaffAnalySum.signin_xiaban}}）
					<view style="display: inline;margin-left: 20px;color:indianred">未签到（{{StaffAnalySum.signin_none}}）</view></view>
					<view v-if="true" class="iconfont icon-arrows_right"></view>
				</view>
			</view>
			<view class="fllow_form" style="height: auto;display: block;">
				<view>护理日志</view>
				<view class="theme">
					<view style="display: inline;margin-left: 20px;">已填写（{{StaffAnalySum.nursinglog_finished}}）</view>
					<view style="display: inline;margin-left: 20px;color:indianred">未填写（{{StaffAnalySum.nursinglog_nofinished}}）</view>
				</view>
			</view>
			<view class="fllow_form" style="height: auto;display: block;">
				<view>工作日报</view>
				<view class="theme">
					<view style="display: inline;margin-left: 20px;">已提交（{{StaffAnalySum.worklog_finished}}）</view>
					<view style="display: inline;margin-left: 20px;color:indianred">未提交（{{StaffAnalySum.worklog_nofinished}}）</view>
				</view>
			</view> 
		</view>
	</view>

</template>

<script>
	import {
		BASE_IMG_URL
	} from '@/util/api'
	import {
		getNowData
	} from '@/util/weekTime.js'
	import {
		netGetSaleSumData,
		netGetConsumeSumData
	} from '@/api/main.js'
	import {
		netMemberAnalyData,
		netGetStaffAnalySumData
	} from '@/api/index.js'
	import {
		netMapKey,
		getAppCtx,
		netGetChainStoreList
	} from '@/api/login.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import {
		commonF
	} from '@/common/common'
	export default {
		mixins: [commonF],
		components: {
			uniIcon,
			uniPopup,
		},
		data() {
			return {
				appCtx: {},

				FDGG: false,
				BASE_IMG_URL: BASE_IMG_URL,
				storeIndex: 0,
				storeList: [],
				dataTime: '',

				tableFrom: {
					dateLimit: 'today',
					storeid: '',
				},

				salessum: {
					totalOrderCount: 0,
					upcart_amount: 0,
					goodsconsume_amount: 0,
					opencart_amount: 0,
					totalCoupon_amount: 0,
					totalallipay_amount: 0,
					totalbankcardpay_amount: 0,
					totalcashpay_amount: 0,
					totalCollectedAmount: 0,
					totalIntegralpayAmount: 0,
					totalOtherpay_amount: 0,
					totalRechargeAmount: 0,
					totalMtpayAmount: 0,
					totalSalesAmount: 0,
					totalScanipay_amount: 0,
					totalwxpay_amount: 0,
				},
				consumesum: {
					consumeTotal: 0,
					projectTotal: 0,
					productTotal: 0,
				},

				shopsum: 0,
				newmembersum: 0,
				personcountsum: 0,


				funnel_sumdata: {
					hasSaleCount: 0,
					hasCompeteSale: 0,
					hasNoSaleCount: 0,
					totalRegCount: 0,
				},
				yestodayMemberCount: 0,
				todayAppointCount: 0,
				memCount: 0,
				memTotalCount: 0,
				memAvg: 0,
				memSum: 0,
				memWhereCount: 0,
				addMemAvg: 0,
				bfb: 0,
				MemberCardSum: {
					total_times: 0,
					left_times: 0,
					total_balance: 0,
					left_balance: 0,
					total_give: 0,
					left_give: 0,
					total_cardcnt: 0,

				},
				StaffAnalySum: {
					sales_first: 0,
					consume_first: 0,
					signin_shanban: 0,
					signin_xiaban: 0,
					signin_none: 0,
					nursinglog_finished: 0,
					nursinglog_nofinished: 0,
					worklog_finished: 0,
					worklog_nofinished: 0,

				}
			}
		},

		onLoad(options) {
			var that = this;
			this.appCtx = getAppCtx()
			if(this.appCtx.loginedUser && this.appCtx.loginedUser.roleType == 20) {
				this.FDGG = true
			}
			console.log("==========")

		},
		onShow() {
			var that = this;
			this.dataTime = getNowData()
			this.getStoreList()
		},
		//监听  页面 卸载
		onUnload() {

		},
		watch: {

		},
		computed: {

		},
		methods: {
			
			signerDetail() {
				uni.navigateTo({
					url: '/pages/daka/report/signer-detail?signerday=' + this.dataTime
				})
			},
			changeStore(e) {
				this.storeIndex = e.detail.value
				this.tableFrom.storeid = this.storeList[e.detail.value].storeId
				this.getData()
			},
			changeDataTime(e) {
				this.dataTime = e.detail.value
				this.getData()
			},
			getStoreList() {

				const data = {
					storeName: '全部',
					storeId: ''
				}
				netGetChainStoreList({
					type: 'all'
				}).then(res => {
					this.storeList = res.data
					if (this.storeList.length > 1 && this.appCtx.loginedUser.roleType == 10) {
						this.tableFrom.storeid = ''
					}
					this.storeList.unshift(data)
					this.getData()
				})

		 },
			getData() {

				let _this = this;
				let params = {
					startDate: this.dataTime,
					endDate: this.dataTime,
					storeid: this.tableFrom.storeid
				}
				netGetSaleSumData(params).then(res => {
					this.salessum = res.data
				})
				netGetConsumeSumData(params).then(res => {
					this.consumesum = res.data
				})
				netGetStaffAnalySumData(params).then(res => {
					this.StaffAnalySum = res.data
				})
				netMemberAnalyData(params).then(json => {
					console.log(json)
					json = json.data
					this.$set(_this, 'yestodayMemberCount', (json.yestodayMemberCount || 0));
					this.$set(_this, 'todayAppointCount', (json.todayAppointCount || 0));
					this.$set(_this, 'memCount', (json.memCount || 0));
					this.$set(_this, 'memAvg', (json.memAvg || 0));
					this.$set(_this, 'memSum', (json.memSum || 0));
					this.$set(_this, 'memWhereCount', (json.memWhereCount || 0));
					this.$set(_this, 'addMemAvg', (json.addMemAvg || 0));
					this.$set(_this, 'bfb', (json.bfb || 0));
					this.$set(_this, 'MemberCardSum', (json.MemberCardSum || {}));
				})
			},
		}
	}
</script>

<style lang="scss">
	.bottom_nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 24rpx;
		background-color: #fff;
		text-align: center;
		color: #999;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
		z-index: 2;

		.bottom_item {
			width: 380rpx;
			height: 80rpx;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			background: #03aa96;
			color: #fff;
			font-size: 26rpx;
		}

		.bottom_item_gai {
			width: 380rpx;
			height: 80rpx;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			background: #fff;
			color: #03aa96;
			font-size: 26rpx;
		}

		.bott_text {
			font-size: 24rpx;
			color: #03aa96;

			span {
				color: #666;
			}
		}
	}

	.sales_head {
		border-top: 1rpx solid #CCC;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx 24rpx;
		background: #fff;

		.tablist {
			padding: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #333;

			.bottomimg {
				width: 20rpx;
				height: 33rpx;
				margin-left: 20rpx;
			}
		}
	}

	.new_fllow {
		margin-top: 40rpx;
		font-size: 28rpx;

		.fllow_form {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
			border-bottom: 1rpx solid #EAEAEA;
			padding: 0 24rpx;

			.form_right {
				display: flex;
				color: #999;

				image {
					width: 40rpx;
					height: 40rpx;
					margin: 28rpx 5rpx 0 0;
				}
			}

			text {
				color: #f00;
				margin-left: 10rpx;
			}

			.form_input {
				input {
					height: 92%;
					// line-height: 100rpx;
					text-align: right;
					margin-right: 10rpx;
				}
			}

			.fllow_button {
				margin-top: 15rpx;
			}
		}

		.fllow_file_li {
			padding: 24rpx 34rpx;
			background: #fff;
			border-bottom: 1rpx solid #EAEAEA;

			.fil_li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 14rpx;

				.fileimg {
					width: 20rpx;
					height: 20rpx;
				}

				.filename {
					font-size: 24rpx;
					color: #999999;
				}

				.closeimg {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.imglist {
			padding: 24rpx 34rpx;
			background: #fff;
			border-bottom: 1rpx solid #EAEAEA;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.imgbox {
				width: 160rpx;
				height: 160rpx;
				margin-right: 14rpx;
				position: relative;
				margin-bottom: 24rpx;
				border: 1rpx solid #EAEAEA;

				.delimg {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					position: absolute;
					right: -16rpx;
					top: -16rpx;
					background: rgba(0, 0, 0, 0.5);
					z-index: 2;
				}

				.selfimg {
					width: 160rpx;
					height: 160rpx;
				}
			}
		}

		.fllow_area {
			background-color: #fff;
			// padding: 0 70rpx;
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			color: #999;

			.area_head {
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				padding: 0 70rpx;

				text {
					color: #f00;
				}
			}

			textarea {
				width: 80%;
				height: 300rpx;
				padding: 30rpx;
				background: #f8f8f8;
				margin: 0 auto;
			}
		}

		.info_head {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 24rpx;
			color: #999;
			padding-left: 24rpx;
		}

		.affiliation {
			background-color: #fff;
			margin-bottom: 20rpx;
			padding-bottom: 40rpx;

			.aff_head {
				height: 100rpx;
				line-height: 100rpx;
				padding-left: 30rpx;

				text {
					color: #f00;
					margin-left: 10rpx;
				}
			}

			.aff_con {
				display: flex;
				text-align: center;
				flex-wrap: wrap;

				.aff_item {
					width: 100rpx;
					margin-right: 15rpx;
					border-radius: 50%;
					margin-bottom: 15rpx;

					image {
						margin-bottom: 15rpx;
						width: 60rpx;
						height: 60rpx;

					}
				}

				.affbox {
					position: relative;

					.delremind {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						position: absolute;
						right: -16rpx;
						top: -16rpx;
						background: rgba(0, 0, 0, 0.5);
						z-index: 2;
					}
				}

				.aff_last {
					image {
						margin-bottom: 15rpx;
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}

		.follow_task {
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	#btn {
		font-size: 26rpx;
		color: #fff;
		text-align: center;
		line-height: 88rpx;
		width: 500rpx;
		height: 88rpx;
		background: #03AA96;
		border-radius: 29rpx;
		margin: 30rpx auto;
	}


	.fllow_item {
		position: relative;

		.unread {
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			position: absolute;
			right: 5rpx;
			top: 5rpx;
			background: #F43F3B;
		}

		.item_data {
			margin: 30rpx 0;

			&::before {
				content: '';
				display: inline-block;
				margin: 0 15rpx 0 24rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 10rpx;
				border: 2rpx solid #03aa96;
			}
		}

		.item_content {
			display: block;
			background-color: #fff;
			padding: 24rpx 24rpx;
			border-radius: 10rpx;
			margin-bottom: 30rpx;

			.con_img {
				display: flex;

				.main_first {
					margin-bottom: 25rpx;
					padding-left: 25rpx;
					flex: 1;

					.main_time {
						line-height: 25px;
					}

					.main_title {
						display: flex;
						width: 100%;
						justify-content: space-between;

						.first_left {
							display: flex;

							:first-child {
								font-size: 32rpx;
								margin-right: 10rpx;
								margin-top: -3rpx;
							}

							:last-child {
								margin-top: 2rpx;
							}
						}

						.main_type {
							padding: 5rpx 20rpx;
							border-radius: 10rpx;
							color: #fff;
						}

						.daofang {
							background: #03aa96;
						}

						.genjin {
							background: #ff7800;
						}

						.other {
							background: #1CBBB4;
						}
					}

				}

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}

			.con_main {
				flex: 1;

				.main_second {
					padding-bottom: 20rpx;
				}

				.main_img {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 20rpx;

					.imgbox {
						padding: 10rpx;
						border-radius: 5rpx;
						border: 1rpx solid #CCCCCC;
						width: 160rpx;
						height: 160rpx;
						margin-right: 14rpx;
						margin-bottom: 14rpx;
					}
				}

				.main_third {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 20rpx 0 10rpx;

					.third_left {
						display: flex;
						align-items: center;

						.icon-clock {
							font-size: 32rpx;
						}

						.lxs_time {
							margin-left: 5px;
							font-size: 26rpx;
						}
					}

					.third_right {
						display: flex;

						.right_num {
							display: flex;

							:last-child {
								margin-right: 20rpx;
							}
						}

						.icon-arrows_right {
							margin-top: -4rpx;
						}
					}
				}

				.main_fourth {
					padding-bottom: 10rpx;
				}
			}
		}
	}
</style>
